$width:1200px;
@mixin title{//自然
    height: 20px;
    font-size: 14px;
    .title{
        display: flex;
        justify-content: space-between;
        p:first-of-type{
            font-size: 20px;
        }
        .more{
            display: flex;
            align-items: center;
            color: #1088F2;
            ul{
                width: 88px;
                height: 24px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-right: 50px;
                li{
                    width: 15px;
                    height: 15px;
                    background-color:#dedcdc;
                    border-radius: 4px;
                    cursor: pointer;
                }
                >li:first-of-type{background-color: #1088F2;}
            }
            p{
                font-size: 14px;
                cursor: pointer;
            }
            p:hover{text-decoration: underline;}
        }
    }
}
@mixin works{
    .con{
        margin-top: 22px;
        //height: 320px;
        display: flex;
        justify-content: space-between;
        .mess{
            color: #999;
            font-size: 12px;
            .name{
                font-size: 14px;
                color: #000;
                font-weight: 500;
                cursor: pointer;
            }
            .name:hover{color: #1088F2;}
            span:last-of-type{
                margin-left: 4px;
                color: #1088F2;
                cursor: pointer;
            }
            .evaluate{
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;
                img{
                    width: 16px;
                }
                >img:last-of-type{
                    margin-left: 22px;
                    cursor: pointer;
                }
            }
            .time{
                width: 285px;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p:first-of-type{margin-right: 130px;}
            }
        }
    }
}
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.all{
    width: 100%;
    max-width: 1905px;
    min-width:$width ;
    margin: auto;
}
.bigImg{
    height: 320px;
    margin-top: 40px+60;
    display: flex;
    justify-content: center;
    cursor: pointer;
    .img{
        width: $width;
        background-color: blue;
    }
}
.place{
    height: 208px;
    margin-top: 37px;
    display: flex;
    justify-content: center;
    .content{
        width: $width;
        .title{
            display: flex;
            justify-content: space-between;
            font-size: 28px;
            font-weight: 500;
            line-height: 32px;
            span{
                font-size: 14px;
                color: #1088F2;
                cursor: pointer;
            }
            span:hover{text-decoration: underline;}
        }
        ul{
            height: 152px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 21px;
            li{
                cursor: pointer;
                font-size: 16px;
            }
        }
    }
}
.t{
    width: 100%;
    height: 60px;
    margin-top: 132-60px;
    display: flex;
    justify-content: center;
    p{
        font-size: 14px;
        border-bottom:3px solid #007aff;
        font-weight: 600;
        line-height: 60px;
    }
}
.kind{
    width: 100%;
    display: flex;
    justify-content: center;
    .content{
        width: $width;
        .nature{
            margin-top: 40px;
            //height: 320px;
            @include title();
            @include works();
        }
        .city{
            margin-top: 42px+320;
            @include title();
            @include works();
        }
        .hot{
            margin-top: 42px+320;
            @include title();
            .title{align-items: center;}
            >ul{
                margin-top: 20px;
                height: 122px+31;
                font-size: 14px;
                text-align: center;
                display: flex;
                justify-content: space-between;
                p{
                    margin-top: 16px;
                    width: 183px;
                }
            }
        }
    }
}
footer{
    margin-top: 230px;
}
@import './header';
@import './footer';
header>nav>ul>li:first-of-type{color: white;}/// ! ///